<template>
  <div class="home-container">
    <div style="background: #ececec; padding: 25px">
      <a-row :gutter="16">
        <a-col :span="12">
          <div
            style="
              display: flex;
              align-items: center;
              background-color: #fff;
              padding: 22px 0px 21px 22px;
            "
          >
            <a-avatar :size="50" :src="userInfo.avatar" />
            <div style="margin-left: 15px">
              <div style="font-size: 20px; margin-bottom: 7px">
                {{ wenhao }}，{{ userInfo.username }}
              </div>
              <router-link :to="{ name: 'VersionUpgrade' }">
                <a-button v-if="userInfo.version == 1" shape="round">{{
                  userInfo.version_title
                }}</a-button>
                <a-button
                  v-else
                  shape="round"
                  style="color: rgb(200, 160, 106); border: 1px solid rgb(200, 160, 106)"
                  >会员版本：{{ userInfo.version_title
                  }}<span
                    v-if="userInfo.version_end_time && userInfo.version_end_time.length > 0"
                    style="margin-left: 15px"
                    >有效期至：{{ userInfo.version_end_time }}</span
                  ></a-button
                >
              </router-link>
            </div>
          </div>
        </a-col>
        <a-col :span="12">
          <a-spin tip="载入中" :spinning="noticeLoading">
            <div
              style="
                padding-left: 50px;
                background-color: white;
                padding: 15px 25px;
                position: relative;
                height: 113px;
              "
            >
              <img
                src="https://img.alicdn.com/imgextra/i2/573804794/O1CN01sqTuN31lHhh7EDlft_!!573804794.png"
                alt=""
                srcset=""
                style="position: absolute; top: 0; left: 0; width: 55px"
              />
              <div
                style="
                  display: flex;
                  flex-direction: row;
                  align-items: center;
                  justify-content: start;
                  flex-wrap: wrap;
                "
              >
                <div
                  v-for="(item, index) in pageData.noticeList.list"
                  :key="index"
                  style="
                    width: 48%;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: flex;
                    flex-direction: row;
                    flex-wrap: nowrap;
                    height: 25px;
                    word-break: keep-all;
                    margin-left: 1%;
                  "
                >
                  <a-tooltip :title="item.title">
                    <a
                      :href="item.url"
                      target="_blank"
                      rel="noopener noreferrer"
                      style="width: 100%; text-overflow: ellipsis; overflow: hidden"
                      ><img
                        v-if="item.is_new == 1"
                        src="~@/assets/new.png"
                        alt=""
                        srcset=""
                        style="margin-right: 3px"
                      />{{ index + 1 }}、{{ item.title }}</a
                    >
                  </a-tooltip>
                </div>
              </div>
            </div>
          </a-spin>
        </a-col>
      </a-row>
    </div>
    <div style="margin-top: 25px">
      <div
        style="
          font-size: 19px;
          font-weight: 600;
          margin-bottom: 15px;
          border-left: 3px solid #1677ff;
          padding-left: 8px;
        "
      >
        业务统计
      </div>
      <a-row :gutter="16">
        <a-col :span="3">
          <router-link :to="{ name: 'ContractList', query: { status_type: 'unsign' } }">
            <a-card
              class="tj_card"
              :class="{ bounce: pageData.unsignContract !== 0 }"
              style="margin-bottom: 15px"
            >
              <a-statistic
                title="待签署合同数"
                :value="pageData.unsignContract"
                :precision="0"
                style="margin-right: 50px"
              />
            </a-card>
          </router-link>
        </a-col>
        <a-col :span="3">
          <router-link :to="{ name: 'ContractList', query: { status_type: 'doing' } }">
            <a-card
              class="tj_card"
              :class="{ bounce: pageData.doingContract !== 0 }"
              style="margin-bottom: 15px"
            >
              <a-statistic
                title="签署中合同数"
                :value="pageData.doingContract"
                :precision="0"
                style="margin-right: 50px"
              />
            </a-card>
          </router-link>
        </a-col>
        <a-col :span="3">
          <router-link :to="{ name: 'ContractList', query: { status_type: 'lq' } }">
            <a-card
              class="tj_card"
              :class="{ bounce: pageData.lqContract !== 0 }"
              style="margin-bottom: 15px"
            >
              <a-statistic
                title="近30天到期合同数"
                :value="pageData.lqContract"
                :precision="0"
                :value-style="{ color: '#d46b08' }"
                style="margin-right: 50px"
              />
            </a-card>
          </router-link>
        </a-col>
        <a-col :span="3">
          <router-link :to="{ name: 'ContractList', query: { status_type: 'gq' } }">
            <a-card
              class="tj_card"
              :class="{ bounce: pageData.gqContract !== 0 }"
              style="margin-bottom: 15px"
            >
              <a-statistic
                title="已到期合同数"
                :value="pageData.gqContract"
                :precision="0"
                :value-style="{ color: '#cf1322' }"
                style="margin-right: 50px"
              />
            </a-card>
          </router-link>
        </a-col>
        <a-divider type="vertical" style="height: 112px" />
        <a-col :span="3">
          <a-card
            class="tj_card"
            :class="{ bounce: pageData.unOpCount !== 0 }"
            style="margin-bottom: 15px; cursor: pointer"
            @click="showListModal"
          >
            <a-statistic
              title="待处理表单反馈数"
              :value="pageData.unOpCount"
              :precision="0"
              style="margin-right: 50px"
            />
          </a-card>
        </a-col>
        <a-divider type="vertical" style="height: 112px" />
        <a-col :span="3">
          <a-card
            class="tj_card"
            style="margin-bottom: 15px; cursor: pointer"
            :class="{ bounce: pageData.todayRcCount !== 0 }"
            @click="showRcModal('today')"
          >
            <a-statistic
              title="今日待处理日程数"
              :value="pageData.todayRcCount"
              :precision="0"
              style="margin-right: 50px"
            />
          </a-card>
        </a-col>
        <a-col :span="3">
          <a-card
            class="tj_card"
            :class="{ bounce: pageData.expireRcCount !== 0 }"
            style="margin-bottom: 15px; cursor: pointer"
            @click="showRcModal('expire')"
          >
            <a-statistic
              title="已过期未处理日程数"
              :value="pageData.expireRcCount"
              :precision="0"
              :value-style="{ color: '#ff0000' }"
              style="margin-right: 50px"
            />
          </a-card>
        </a-col>
      </a-row>
    </div>
    <a-modal v-model:open="feedModal" title="待处理表单列表" :width="600" :footer="null">
      <a-spin tip="Loading..." :spinning="feedModalLoading" style="width: 100%">
        <div v-if="feedSiteList.length > 0" style="height: 55vh; overflow-y: scroll">
          <div
            v-for="(item, index) in feedSiteList"
            :key="index"
            :style="index == 0 ? ' margin-top: 15px; ' : ''"
          >
            <router-link
              :to="{ name: 'FeedbackLog', query: { site_id: item._id } }"
              target="_blank"
            >
              <div class="feed_item">
                <div style="color: rgba(0, 0, 0, 0.88)">{{ item.title }}</div>
                <div style="color: rgba(0, 0, 0, 0.45)">未处理数量：{{ item.count }}</div>
              </div>
            </router-link>
          </div>
        </div>
      </a-spin>
      <a-empty
        v-if="feedSiteList.length == 0 && feedModalLoading == false"
        image="https://img.alicdn.com/imgextra/i3/573804794/O1CN01IO097G1lHhdtoisyG_!!573804794.png"
        :image-style="{
          height: '120px'
        }"
      >
        <template #description>
          <view style="color: rgba(0, 0, 0, 0.88); padding-top: 20px">
            暂无数据，去
            <router-link :to="{ name: 'FeedbackSite' }" target="_blank">添加站点</router-link>
          </view>
        </template>
      </a-empty>
    </a-modal>
    <a-modal v-model:open="rcModal" title="待处理日程列表" :width="600" :footer="null">
      <a-spin tip="Loading..." :spinning="rcModalLoading" style="width: 100%">
        <div v-if="rcCateList.length > 0" style="height: 55vh; overflow-y: scroll">
          <div
            v-for="(item, index) in rcCateList"
            :key="index"
            :style="index == 0 ? ' margin-top: 15px; ' : ''"
          >
            <router-link :to="{ name: 'Calendar', query: { cate: item._id } }" target="_blank">
              <div class="feed_item">
                <div style="color: rgba(0, 0, 0, 0.88)">{{ item.title }}</div>
                <div style="color: rgba(0, 0, 0, 0.45)">待办数量：{{ item.count }}</div>
              </div>
            </router-link>
          </div>
        </div>
      </a-spin>
      <a-empty
        v-if="rcCateList.length == 0 && rcModalLoading == false"
        image="https://img.alicdn.com/imgextra/i3/573804794/O1CN01IO097G1lHhdtoisyG_!!573804794.png"
        :image-style="{
          height: '120px'
        }"
      >
        <template #description>
          <view style="color: rgba(0, 0, 0, 0.88); padding-top: 20px">
            暂无数据，去
            <router-link :to="{ name: 'Calendar' }" target="_blank">添加日程</router-link>
          </view>
        </template>
      </a-empty>
    </a-modal>
    <div style="margin-top: 25px">
      <div
        style="
          font-size: 19px;
          font-weight: 600;
          margin-bottom: 15px;
          border-left: 3px solid #1677ff;
          padding-left: 8px;
        "
      >
        旗下平台
      </div>
      <a-row :gutter="16">
        <a-col :span="12">
          <a href="http://www.ecapi.cn" target="_blank" rel="noopener noreferrer">
            <a-card style="margin-bottom: 15px">
              <div style="font-size: 18px">喵有券API接口平台</div>
              <div style="margin-top: 8px; color: #878787">
                淘宝客/京东联盟/拼多多/外卖红包/文娱直充等API开放使用
              </div>
            </a-card>
          </a>
        </a-col>
        <a-col :span="12">
          <a href="http://www.ecmpay.cn" target="_blank" rel="noopener noreferrer">
            <a-card style="margin-bottom: 15px">
              <div style="font-size: 18px">喵付通聚合支付平台</div>
              <div style="margin-top: 8px; color: #878787">
                深度整合支付宝、微信支付，让支付接口对接前所未有的简单
              </div>
            </a-card>
          </a>
        </a-col>
      </a-row>
    </div>
    <div style="margin-top: 25px; display: flex; align-items: center; justify-content: center">
      <a-carousel
        v-if="adsList != undefined && adsList.length > 0"
        dot-position="bottom"
        arrows
        autoplay
        style="width: 1200px; height: 150px"
      >
        <template #prevArrow>
          <div class="custom-slick-arrow" style="left: 10px; z-index: 1">
            <LeftCircleOutlined />
          </div>
        </template>
        <template #nextArrow>
          <div class="custom-slick-arrow" style="right: 10px">
            <RightCircleOutlined />
          </div>
        </template>
        <div v-for="(item, index) in adsList" :key="index">
          <a :href="item.url + '/' + encodeURIComponent(href)" target="_blank"
            ><img :src="item.pic" style="max-width: 1200px"
          /></a>
        </div>
      </a-carousel>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, onMounted } from 'vue'
import { Statistic, Row, Col, Carousel, Image, Avatar, Modal, Spin } from 'ant-design-vue'
import {
  SettingOutlined,
  EditOutlined,
  EllipsisOutlined,
  LeftCircleOutlined,
  RightCircleOutlined
} from '@ant-design/icons-vue'
import { useStore } from '@/store'
import { getWorkplace, getFeedbackCount, getRcCount } from '@/api/common'

export default defineComponent({
  name: 'Workplace',
  components: {
    [Statistic.name]: Statistic,
    [Carousel.name]: Carousel,
    [Image.name]: Image,
    [Modal.name]: Modal,
    [Spin.name]: Spin,
    [Row.name]: Row,
    [Col.name]: Col,
    [Avatar.name]: Avatar,
    SettingOutlined,
    LeftCircleOutlined,
    RightCircleOutlined,
    EditOutlined,
    EllipsisOutlined
  },
  setup() {
    const userInfo = useStore().getters['user/userInfo']
    const state = reactive<any>({
      adsList: [],
      feedSiteList: [],
      wenhao: '你好',
      rcCateList: [],
      pageData: {
        noticeList: {
          list: []
        }
      },
      rcModalLoading: false,
      feedModal: false,
      noticeLoading: true,
      rcModal: false,
      feedModalLoading: true,
      href: window.location.href
    })
    onMounted(() => {
      getAds()
      getWorkplaceData()
      const currentHour = new Date().getHours()
      if (currentHour < 11) {
        state.wenhao = '早上好'
      } else if (currentHour < 13) {
        state.wenhao = '中午好'
      } else if (currentHour < 18) {
        state.wenhao = '下午好'
      } else if (currentHour < 22) {
        state.wenhao = '晚上好'
      } else {
        state.wenhao = '很晚了，早点休息哦'
      }
    })
    function getAds() {
      ;(window as any).AdsData('4848156093376928').then((res) => {
        state.adsList = res
      })
    }
    function showListModal() {
      state.feedModal = true
      state.feedModalLoading = true
      state.feedSiteList = []
      getFeedbackCount({}).then((res) => {
        state.feedSiteList = res
        state.feedModalLoading = false
      })
    }
    function showRcModal(type) {
      state.rcModal = true
      state.rcModalLoading = true
      state.rcCateList = []
      getRcCount({ type: type }).then((res) => {
        state.rcCateList = res
        state.rcModalLoading = false
      })
    }
    function getWorkplaceData() {
      state.noticeLoading = true
      getWorkplace({}).then((res) => {
        state.noticeLoading = false
        state.pageData = res
      })
    }
    return {
      ...toRefs(state),
      showRcModal,
      showListModal,
      userInfo
    }
  }
})
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: calc(100vh - 280px);
  display: flex;
  flex-direction: column;

  img {
    flex: 1;
    min-height: 0;
  }

  .ant-form {
    flex: 2;
  }
}
.feed_item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 15px;
  border: 1px solid #d3d3d3;
  border-radius: 5px;
  margin: 10px;
  &:hover {
    border: 1px solid #1677ff;
  }
}
:deep(.slick-slide) {
  text-align: center;
  height: 150px;
  line-height: 150px;
  background: #364d79;
  overflow: hidden;
}

:deep(.slick-arrow.custom-slick-arrow) {
  width: 25px;
  height: 25px;
  font-size: 25px;
  color: #fff;
  background-color: rgba(31, 45, 61, 0.11);
  transition: ease all 0.3s;
  opacity: 0.3;
  z-index: 1;
}
:deep(.slick-arrow.custom-slick-arrow:before) {
  display: none;
}
:deep(.slick-arrow.custom-slick-arrow:hover) {
  color: #fff;
  opacity: 0.5;
}
@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
}
.bounce {
  animation: bounce 1s infinite;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.tj_card:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
</style>
